<template lang="">
  <div class="common-layout" style="background:#00AC6A">
    <el-container >
      <el-header>阳光小区6号交流群(500) 
        <!-- 设置添加人员 -->
         <el-icon style="float:right;padding-bottom:5px" @click="drawer = true">
            <Expand />
        </el-icon>
      </el-header>

<!-- 抽屉 更多 -->
      <el-drawer 
        v-model="drawer" 
        title="更多" 
        :with-header="true" 
        direction="ltr"
        size="20%">
         <div>
            <div id="name">
                <h3>群成员</h3>
                <el-icon v-for="item in 5"><User/></el-icon>
                <el-icon><CirclePlusFilled /></el-icon>
                <el-icon><RemoveFilled /></el-icon>
            </div>
            <!--  -->
            <div id="talkMore">
                <p>群聊名称：    阳光小区6号交流群 </p>
                <p>群公告：下来登记</p>
                <p>备注 <el-icon style="float:right"><ArrowRight /></el-icon></p>
            </div>
            <div id = "talkThing">
                <p>消息免打扰<el-switch v-model="value1" /></p>
                <hr>
                <p>置顶聊天<el-switch v-model="value2" /></p>
                <hr>
                <p>保存到通讯录<el-switch v-model="value3" /></p>
            </div>
         </div>
      </el-drawer>

      <el-main >聊天内容</el-main>
      
      <el-footer >  
        <el-icon><VideoCamera /></el-icon>
        <el-icon><Microphone /></el-icon>
        <el-input v-model="input" style="width:200px">
            <template #suffix>
                 <el-icon color="black"><User /></el-icon>
            </template>
        </el-input>
        <el-icon><CirclePlusFilled /></el-icon>
        <el-button style="width:54px;background-color:#00B4F4">发送</el-button>
    </el-footer>
    </el-container>
  </div>
</template>

<script>
import { Expand ,VideoCamera,Microphone,CirclePlusFilled,User,RemoveFilled,ArrowRight} from '@element-plus/icons-vue';
export default {
    components:{
        Expand,VideoCamera,Microphone,CirclePlusFilled,User,RemoveFilled,ArrowRight
    },
    data () {
        return {
            input:"",
            drawer:false,
            value1:true,
            value2:true,
            value3:true
        }
    }
}

</script>
<style lang="less" scoped>

    .el-main{
        /* background: url(../../../assets/talk_backgroud.jpg )  no-repeat 0px 0px; */
        background-color: #6CCF70;
    }
    .common-layout{
        border: 1px black solid;
        padding-top: 20px;
    }
    .common-layout .el-header{
        border-bottom: 1px blue solid  ;
        height: 20px;
        line-height: 5px;
    }
    .common-layout .el-main{
        overflow: hidden;
        height: 300px;
        border-bottom: 1px black solid;
    }
    .common-layout .el-footer{
        font-size: 20px;
        height: 40px;
    }
    .common-layout .el-footer .el-icon{
        size:30px
    }

    /* 更多信息 */
    #name{
        border: 2px black solid;margin: 5px;
        
    }
    #name .el-icon{
        border: 1px black dotted;
        color: black;
        width: 30px;
        height: 30px;
        margin: 5px;
    }
    #talkMore{
        border: 2px black solid;margin: 5px;
        margin: 5px;

    }
    #talkThing{
        border: 2px black solid;margin: 5px;
        margin: 5px;

    }

    #talkThing p .el-switch{
        float: right;
    }
</style>